<script lang="ts" setup>
import type { FlowNodeInterface } from "@/components/FlowNode/type";

defineProps({
    nodeData: {
        type: Object as () => FlowNodeInterface,
        required: true,
    },
});
</script>
<template>
    <div
        class="flow-node border border-#4374ce rounded b-style-solid b-l-4px w-100px h-56px text-size-sm text-#4374ce bg-#e7eefc flex items-center justify-center flex-col relative"
    >
        <div>{{ nodeData.name }}</div>
        <div>{{ `(${nodeData.startDays}-${nodeData.endDays}天)` }}</div>
        <div
            class="absolute left--32px"
            v-if="
                nodeData.prevStage !== null && nodeData.prevStage.length !== 0
            "
        >
            <div class="flow-arrow"></div>
        </div>
        <div
            class="absolute right--22px"
            v-if="
                nodeData.nextStage !== null && nodeData.nextStage.length !== 0
            "
        >
            <div class="flow-line"></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.flow-arrow {
    width: 21px;
    height: 2px;
    position: relative;
    background: var(--el-color-primary);
    &::before {
        content: "";
        display: block;
        position: absolute;
        right: -6px;
        top: -3px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 6px solid var(--el-color-primary);
    }
}
.flow-line {
    width: 21px;
    height: 2px;
    position: relative;
    background: var(--el-color-primary);
}
</style>
